<template>
  <div class="classroom-details">
    <div class="details-table">
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">教室名称：</div>
            <div class="div-flex-last-right">{{classroomDetail.name}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">英文名称：</div>
            <div class="div-flex-last-right">{{classroomDetail.nameEn}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">校区：</div>
            <div class="div-flex-last-right">{{classroomDetail.campusI18n}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">教学楼：</div>
            <div class="div-flex-last-right">{{classroomDetail.towerName}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">教室类型：</div>
            <div class="div-flex-last-right">{{classroomDetail.typeI18n}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">楼层：</div>
            <div class="div-flex-last-right">{{classroomDetail.floor}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">排课容量：</div>
            <div class="div-flex-last-right">{{classroomDetail.classCapacity}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">排考容量：</div>
            <div class="div-flex-last-right">{{classroomDetail.examCapacity}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">最大行：</div>
            <div class="div-flex-last-right">{{classroomDetail.maxRow}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">最大列：</div>
            <div class="div-flex-last-right">{{classroomDetail.maxCol}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">是否可排课：</div>
            <div class="div-flex-last-right">{{classroomDetail.isClass | getYesOrNo}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">是否可排考：</div>
            <div class="div-flex-last-right">{{classroomDetail.isExam | getYesOrNo}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">是否可借用：</div>
            <div class="div-flex-last-right">{{classroomDetail.isBorrow | getYesOrNo}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">用途：</div>
            <div class="div-flex-last-right">{{classroomDetail.usageStr}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="center">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">固定使用部门：</div>
            <div class="div-flex-last-right">{{classroomDetail.departmentStr}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">所属部门：</div>
            <div class="div-flex-last-right">{{classroomDetail.projectStr}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="flex-start">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">创建时间：</div>
            <div class="div-flex-last-right">{{classroomDetail.createTime}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-height" type="flex" justify="flex-start">
        <el-col :span="12">
          <div class="div-flex">
            <div class="div-flex-left">备注：</div>
            <div class="div-flex-last-right">{{classroomDetail.remark}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import filters from "common/src/filters";
export default {
  name: "roomInfoDetail",
  props: ["classroomDetail"],
  filters: {
    getYesOrNo(val) {
      return filters.yesOrNo(val);
    }
  },
  data() {
    return {};
  },
  methods: {},
  created() {}
};
</script>

<style lang="scss" scoped>
.classroom-details {
  .details-table {
    border: 2px solid #e5e9f2;
  }
  .row-height {
    min-height: 50px;
    text-align: center;
    border-bottom: 1px solid #e5e9f2;
    .div-flex {
      display: flex;
      height: 100%;
      &.div-left {
        justify-content: flex-start;
      }
      .div-flex-left {
        flex: 1;
        text-align: right;
        height: 100%;
        border-right: 1px solid #e5e9f2;
        background-color: rgba(245, 247, 249, 1);
        line-height: 50px;
      }
      .div-flex-last-right {
        flex: 2;
        text-align: left;
        padding: 10px;
        line-height: 30px;
      }
    }
  }
}
</style>
